<template>
  <div class="list">
    <ul>
      <li
        v-for="(item, index) in navs"
        :key="index"
        :class="{ active: isactive === index }"
        @click="resactive(index)"
      >
        {{ item }}
      </li>
    </ul>
  </div>
</template>
// 做法：将数组v-for循环输出 关键字唯一（index），刚开始以匹配index=0 的元素设置高亮 //
为导航元素添加点击事件
@click,再添加方法resactive(点击，即改变isactive值为index)，匹配条件：标示值全等idnex时才设置active
<script>
export default {
  data() {
    return {
      navs: ["啊啊", "艾法尔我", "第三方", "ssss"],
      isactive: 0, //设置标示值
    };
  },
  methods: {
    resactive(index) {
      this.isactive = index;
      // console.log(this.isactive === index);
      // console.log(this.isactive);
      // console.log(index);
    },
  },
};
</script>

<style lang="less" scoped>
ul {
  list-style: none;
  border-radius: 10px;
  width: 200px;
  overflow: hidden;
  padding: 0;
  li {
    float: left;
    width: 100px;
    height: 40px;
    background-color: #ccc;
    color: #fff;
    text-align: center;
    line-height: 40px;
    cursor: pointer;
  }
  .active {
    background-color: blue;
  }
}
</style>
